<template>
	<view>
		<!-- <image class="bg" src="/static/images/photo/bg.jpg" mode="scaleToFill"></image> -->
		<view class="main" :style="{ paddingTop: safeAreaInsetsTop + 'px' }">
			<userCard ref="userCard"></userCard>
			<uni-notice-bar showIcon scrollable single text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>
			<view class="menu">
				<view v-if="show_arti_man" class="menu-item" hover-stay-time="50" @click="goArticleManage">
					<view class="left-side">
						<image src="/static/images/photo/icon/work.png"></image>
						<view class="title">文章管理</view>
					</view>
					<view class="right-side">
						<uni-icons type="right" size="18" />
					</view>
				</view>
				<view class="menu-item" hover-stay-time="50" @click="goPageFollow">
					<view class="left-side">
						<image src="/static/images/photo/icon/concern.png"></image>
						<view class="title">我的关注</view>
					</view>
					<view class="right-side">
						<uni-icons type="right" size="18" />
					</view>
				</view>
				<view class="menu-item" hover-stay-time="50" @click="goPageCollect">
					<view class="left-side">
						<image src="/static/images/photo/icon/collect .png"></image>
						<view class="title">我的收藏</view>
					</view>
					<view class="right-side">
						<uni-icons type="right" size="18" />
					</view>
				</view>
				<view class="menu-item" hover-stay-time="50" @click="goPageSetting">
					<view class="left-side">
						<image src="/static/images/photo/icon/set-up.png"></image>
						<view class="title">设置</view>
					</view>
					<view class="right-side">
						<uni-icons type="right" size="18" />
					</view>
				</view>
			</view>
		</view>
		
	</view>

</template>

<script>
import { getIsLogin, getUserInfo } from "../../../utils/auth.js"
import userCard from '../../../components/user-card/user-card.vue'
	export default {
		data() {
			return {
				show_arti_man: (getIsLogin() || false) && (getUserInfo().role < 3)
			}
		},
		components: {
			userCard
		},
		onShow() {
			//刷新组件user-card登录信息的值
			this.$refs.userCard.getUserInfo()
			
		},
		onLoad() {
			const h = uni.getSystemInfoSync().safeAreaInsets.top;
			this.safeAreaInsetsTop = h;
		},
		methods: {
			//刷新
			refresh() {
				
				uni.stopPullDownRefresh();
			},
			showToast(message) {
				uni.showToast({
					title: message,
					duration: 1500,
					icon: 'none',
				});
			},
			goPageSetting() {
				uni.navigateTo({
					url: '/pages/mine/setting/index'
				})
			},
			goPageFollow() {
				uni.navigateTo({
					url: '/pages/mine/follow/index'
				})
			},
			goPageCollect() {
				uni.navigateTo({
					url: '/pages/mine/collect/index'
				})
			},
			goArticleManage() {
				if(getUserInfo().role == 2) {
					uni.showToast({
						title: '权限不足',
						duration: 2000,
						icon: 'error'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/mine/manage/index'
				})
			},
			deleteClick() {
				uni.setStorageSync('readHistory', [])
				this.showToast("清除成功")
				this.zanHistory = uni.getStorageSync('zanHistory').length || 0
				this.historyLen = uni.getStorageSync('readHistory').length || 0
			},
			aboutClick() {
				let site = {
				  title: "关于作者",
				  url: "https://ning310975876.gitee.io"
				}
				uni.setClipboardData({
					data: "https://ning310975876.gitee.io", //要被复制的内容
					success: () => { //复制成功的回调函数
						this.showToast('已复制地址，请使用浏览器打开查看')
					}
				});
				this.$tab.navigateTo(`/pages/common/webview/index?title=${site.title}&url=${site.url}`)
			},
			downClick() {
				// uni.navigateTo({
				// 	url: "/pages/photo/list/list"
				// })
			},
			cellClick() {
				
			},
			historyClick() {
				
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.bg {
		width: 100vw;
		-webkit-mask: linear-gradient(0deg, transparent, #fff 65%);
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.main {
		padding: 0 32rpx;

		.store {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background: #f7fbff;
			border-radius: 24rpx;

			.store-item:first-child {
				margin-left: 0;
			}

			.store-item:last-child {
				margin-right: 0;
			}

			.store-item {
				flex: 1;
				padding: 36rpx;
				margin: 0 16rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				color: black;
				border-radius: 24rpx;
				white-space: nowrap;

				.num {
					font-size: 52rpx;
					font-weight: 900;
					color: transparent;
					background-clip: text;
					background-image: linear-gradient(135deg, #a1c4fd, #c2e9fb);
					margin-bottom: 16rpx;
				}
			}
		}

		.menu {
			margin-top: 36rpx;
			background: white;
			border-radius: 24rpx;
			background: #f7fbff;

			.menu-item:last-child {
				border-bottom: none;
			}

			.menu-item {
				display: flex;
				justify-content: space-between;
				padding: 36rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #efefef;

				.left-side {
					display: flex;

					.title {
						margin-left: 24rpx;
					}
				}
			}

			image {
				width: 38rpx;
				height: 38rpx;
			}
		}
	}
</style>
